<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个"容器"-->

<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>

<!--引入库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<!--引入prop-type 用于对组件标签属性进行限制-->
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">


    function Person(props) {

        const {name, age, sex} = props;
        return (
            <div>
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
            </div>
        );
    }

    Person.propTypes = {
        //16版本被弃用
        //name:React.PropTypes.string
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
        speak: PropTypes.func
    };

    Person.defaultProps = {
        sex: "未知",
        age: 12
    };


    ReactDOM.render(<Person name='Kitty' age={12} sex='女'/>, document.getElementById('test3'));


</script>

</body>
</html>
